<template>
	<view>
		<!-- 标题 -->
		<headTitle title="" :product="true" @share="share" @moremenu="moremenu"></headTitle>
		
		<!-- 菜单 -->
		<opmenu v-model="show"></opmenu>
		
		<!-- 快速定位商品、评价、详情 -->
		<view class="speediness bgfff flex-center" :style="{ opacity: headerOpacity, zIndex: headerzIndex }">
			<view class="speediness-title" @tap="toAnchor(index)"
			v-for="(item,index) in anchorlist" :class="[selectAnchor==index ?'active':'']" :key="index">
				{{ item.name }}
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="carousel">
			<swiper circular @change="toggle" :current="currentIndex">
				<swiper-item class="swiper-item" v-for="(item, index) in banner" :key="index" @tap="showImg(banner, index, true)">
					<view class="image-wrapper"><image :src="item" class="loaded" mode="center"></image></view>
				</swiper-item>
			</swiper>
			<view class="carousel-index font28 colorfff">
				{{ (currentIndex + 1) + '/' + banner.length }}
			</view>
		</view>
		
		<!-- 标题 -->
		<view class="introduce-section bgfff">
			<view class="price-box">
				<view>
					<text class="price font38">¥{{ shop.price }}</text>
					<text class="m-price font20 color999">¥{{ shop.originalPrice }}</text>
				</view>
				<text class="font22 color999">{{ shop.sale | numFormat }}销量</text>
			</view>
			<text class="title font28 color333">{{ shop.subTitle }}</text>
		</view>
		<!-- 规格选择+券+说明 -->
		<view class="user-section bgfff">
			<view class="user-num flex-center-between" @tap="openSku('select')">
				<text class="font26 color999">选择规格</text>
				<view class="flex-center">
					<text class="user-text font26 color333" v-for="(item, idx) in skuData.difference || []" :key="idx">
						{{ item }}
					</text>
					<text class="yticon icon-you color666"></text>
				</view>
			</view>
			<view class="user-ticket flex-center-between" v-show="ticket.length > 0" @tap="discount('/pages/coupon/productCoupon?parentId=' + shop.id)">
				<text class="font26 color999">领劵</text>
				<view class="flex-center">
					<view class="user-quan font24" v-for="(item, index) in ticket" :key="index">
						{{ item.name }}
					</view>
					<text class="yticon icon-you color666"></text>
				</view>
			</view>
			<view class="user-explain flex-center-between" v-show="serveData.length > 0" @tap="showServe = true">
				<text class="font26 color999">服务说明</text>
				<view class="flex-center">
					<view class="flex-center" v-for="(item, index) in this.serveData.length > 2 ? this.serveData.slice(0, 2) : this.serveData" :key="index">
						<text class="icon-explain"></text>
						<text class="explain font24 color333">{{ item.serviceTitle }}</text>
					</view>
					<text class="yticon icon-you color666"></text>
				</view>
			</view>
		</view>
		
		<!-- 服务说明 -->
		<view class="serve flex-center-center" @touchmove.stop.prevent="stopPrevent" v-if="showServe" @tap="showServe = false">
			<view class="serve-border bgfff" @tap.stop="stopPrevent">
				<view class="font34 fontb color333 flex-center-center">服务</view>
				<view v-for="(item, index) in serveData" :key="index">
					<view class="serve-title flex-center">
						<text></text>
						<view class="font32 color333">{{item.serviceTitle}}</view>
					</view>
					<view class="serve-txt font28 color666">{{item.serviceDetails}}</view>
				</view>
			</view>
		</view>
		
		<!-- 评价 -->
		<view class="comment bgfff" id="comments">
			<view class="comment-title flex-center-between">
				<text class="font30 color333">用户评价（{{comment.allComments || 0}}）</text>
				<view class="flex-center" v-if="comment.allComments" @tap="navToTabPage('/pages/comment/allComment?productId=' + id)">
					<text class="font24 color666">查看全部</text>
					<text class="yticon icon-you color666"></text>
				</view>
			</view>
			<view class="comment-info flex-center" v-if="comment.allComments">
				<image :src="comment.pic" mode="aspectFill"></image>
				<text class="font32 color333">{{ comment.memberName }}</text>
			</view>
			<view class="comment-time font26 color888" v-if="comment.allComments">
				{{ comment.consultAddtime }} {{ comment.attr }}
			</view>
			<view class="comment-grade flex-center" v-if="comment.allComments">
				<text class="font28 color333 fontb">商品评分</text>
				<view class="comment-start flex-center">
					<text class="icon-start" :class="{'icon-starta': index < comment.score}" 
						v-for="(item, index) in 5" :key="index"></text>
				</view>
			</view>
			<view class="comment-text show-two-text font30 color333" v-if="comment.allComments">
				{{ comment.consultContent }}
			</view>
			<view class="flex-wrap" v-if="comment.allComments">
				<view class="comment-image" :class="{'comment-image-more': comment.images.length > 1}"
					v-for="(item, index) in comment.images" :key="index">
					<image :src="item" mode="aspectFill" @tap="showImg(comment.images, index, false, comment)"></image>
				</view>
			</view>
			<view class="comment-none font30 color333 fontb" v-if="!comment.allComments">商品暂无评价</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="detail-desc bgfff">
			<view class="d-header flex-center-center">
				<text class="bgfff font28 color666">商品详情</text>
			</view>
			<rich-text class="detail-content" :nodes="shop.detailHtml"></rich-text>
		</view>
		
		<!-- 商品规格 -->
		<view class="speed bgfff" v-if="speedList.length > 0">
			<view class="d-header flex-center-center">
				<text class="bgfff font28 color666">商品规格</text>
			</view>
			<view class="speed-info flex-center">
				<image :src="speedList[speedIndex].pic" mode="aspectFill"></image>
				<view class="flex-column">
					<text class="price font40 fontb">¥{{ speedList[speedIndex].price }}</text>
					<text class="font26 color999">库存{{ speedList[speedIndex].stock }}件</text>
				</view>
			</view>
			<view class="speed-op flex-column">
				<text class="font28 color333">规格</text>
				<view v-for="(item, index) in speedList" :key="index">
					<text class="speed-item font26 color333" @tap="toggleSpeed(index)"
						:class="{'speed-item-active': speedIndex === index}">
						{{ item.sp1 }}
					</text>
				</view>
			</view>
			<view class="speed-num flex-center-between">
				<text class="font28 color333">购买数量</text>
				<uni-number-box v-model="speednum" :min="1" :max="speedList[speedIndex].stock" @focus='numFocus'></uni-number-box>
			</view>
			<view class="speed-btn">
				<button class="font34" type="warn" plain="true" @tap="quickOrder">快速下单</button>
			</view>
		</view>
		
		<!-- 看了又看 -->
		<view class="look">
			<view class="d-header flex-center-center">
				<text class="bgfff font28 color666">看了又看</text>
			</view>
			<view class="flex-wrap">
				<shop v-for="(item, index) in lookList" :key="index" :item="item"></shop>
			</view>
		</view>
		
		<!-- 置顶 -->
		<view class="shop-top" @tap="gotop" :style="{ opacity: headerOpacity, zIndex: headerzIndex }">
			<image src="/static/image/stick.png" mode=""></image>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom flex-center-center bgfff" v-show="showButton">
			<view class="page-bottom-op flex-center-between">
				<view class="p-b-btn flex-column-center">
					<text class="yticon icon-service"></text>
					<text class="font20 color999">客服</text>
				</view>
				<view class="p-b-btn flex-column-center" @tap="toFavorite(goods)">
					<text class="yticon icon-collect" :class="{ 'icon-collect-active': favorite }"></text>
					<text class="font20 color999">收藏</text>
				</view>
				<view class="p-b-btn flex-column-center" @tap="discount('/pages/cart/shopCart')">
					<text class="yticon icon-shopping"></text>
					<text class="font20 color999">购物车</text>
				</view>
			</view>

			<view class="action-btn-group flex-center">
				<button type="primary" class="action-btn add-cart-btn" @tap="openSku('cat')">加入购物车</button>
				<button type="primary" class="action-btn buy-now-btn" @tap="openSku('buy')">立即购买</button>
			</view>
		</view>
		
		<!-- 规格选择 -->
		<selectSku ref="sku" :skuStockList="skuStockList" :productAttributeValueList="productAttributeValueList" :optype="optype" v-model='skuData' :id="id" @sumbit='sumbitBuy'></selectSku>
		<!-- 分享 -->
		<share ref="share" :contentHeight="400" :shareData="shareData"></share>
		<!-- 预览图片 -->
		<previewImg v-if="openImg" @close="close" :cureent="currentImg" :arr="arrImg" @changebanner="changebanner"></previewImg>
	</view>
</template>

<script>
import Api from '@/common/api'
import shop from '@/components/shop'
import share from '@/components/share'
import opmenu from '@/components/menu'
import headTitle from '@/components/head-title'
import previewImg from '@/components/preview-img'
import uniNumberBox from "@/components/uni-number-box/uni-number-box"
import selectSku from "@/components/select-sku"
import { mapState } from 'vuex'
export default {
	data() {
		return {
			show: false, // 右上角菜单
			openImg: false, // 展示图片
			arrImg: [], // 图片数组
			currentImg: 0, // 当前选中图片
			bannerOpen: true, // banner图打开的或评论图打卡的
			showServe: false, // 显示服务说明
			serveData: [], // 说明的数据
			maskState: 0, //优惠券面板显示状态
			small: null,
			favorite: false,
			//控制渐变标题栏的参数
			headerzIndex: 0,//层级
			headerOpacity: 0,//不透明度
			anchorlist: [ // 导航条锚点
				{name:'商品',top:0},
				{name:'评价',top:0},
				{name:'详情',top:0}
			],
			selectAnchor: 0, // 选中锚点
			lookList: [], // 看了又看的数据
			currentIndex: 0, // 轮播图第几张
			banner: [],
			shop: {}, // 商品信息
			ticket: [],
			comment: {},
			speedList: [],
			speedIndex: 0, // 快速下单选中的索引
			speednum: 1, // 快速下单的数量
			skuStockList: [], // sku列表
			productAttributeValueList: [], // spu规格列表
			skuData: {}, // 规格选中数据
			optype: 'select', // select选规格 cat加入购物车 buy立即购买
			id: 0, // 商品id
			submitData: null, // 确认订单的数据
			params: {}, // 确认订单要提交订单
			toggleData: '', // 切换页面需要重新请求数据(记录token)
			shareData: {}, // 分享的数据
			showButton:true,
			height: 0, // 屏幕高度
		};
	},
	async onShow() {
		if(this.toggleData !== uni.getStorageSync('token')) {
			this.toggleData = uni.getStorageSync('token')
			// 这里处理时为了登陆后获取最新的收藏数据
			let data = await Api.apiCall('get', Api.goods.getShopDetail, { id: this.id }) || {}
			// 添加商品足迹
			this.addFootprint(this.id)
			this.favorite = data.favorite
		}
	},
	async onLoad(ops) {
		//接收传值,id里面放的是标题，因为测试数据并没写id
		this.id = ops.id
		this.toggleData = uni.getStorageSync('token')
		if (this.id) {
			let data = await Api.apiCall('get', Api.goods.getShopDetail, { id: this.id }, true)
			if (data) { 
				this.shop = data.goods || {}
				// 轮播图
				this.banner = this.shop.albumPics || []
				// 领券
				this.ticket = data.contentResult || []
				// 评论
				this.comment = data.pmsProductConsult || {}
				// // 快速下单的所有规格
				this.speedList = data.list || []
				// sku列表
				this.skuStockList = data.skuStockList || []
				// spu规格列表
				this.productAttributeValueList = data.productAttributeValueList || []
				// 收藏
				this.favorite = data.favorite
				// 服务说明
				this.serveData = data.goodsService || []
				// 设置分享的数据
				this.shareData = {
					shareTitle: this.shop.detailDesc,
					shareUrl: this.$host + '/pages/product/product?id=' + this.shop.id,
					shareContent: '我在物连家美发现了一个不错的商品，快来看看吧，说不定你也喜欢哦~',
					shareIconUrl: this.shop.shareImg || '',
					shareImageUrl: '',
				}
			}
			// 获取看了又看的数据
			this.getLookData(this.id)
			// 添加商品足迹
			this.addFootprint(this.id)
		}
		//计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
		setTimeout(() => {
			this.calcAnchor()
		}, 0)
		// 获取窗口可视高度
		this.height = uni.getSystemInfoSync().windowHeight
		// 处理键盘弹出和收起
		uni.onWindowResize((res) => {
			if(this.height === res.size.windowHeight) {
				this.showButton = true
			}
		})
	},
	// 监听页面滑动
	onPageScroll(e) {
		let top = e.scrollTop
		//锚点切换
		this.selectAnchor = top >= this.anchorlist[2].top ? 2 : top >= this.anchorlist[1].top ? 1 : 0
		//导航栏渐变
		let tmpY = 375
		top = top > tmpY ? 375 : top
		this.headerOpacity = top * (1 / tmpY)
		//切换层级
		this.headerzIndex = top > 0 ? 10 : 0
	},
	components: {
		share,
		uniNumberBox,
		shop,
		headTitle,
		opmenu,
		previewImg,
		selectSku,
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		// 数字按钮
		numFocus(flag) {
			this.showButton = flag
		},
		// 添加商品足迹
		async addFootprint(productId) {
			// 有登陆时添加商品足迹
			if (uni.getStorageSync('token') && productId) {
				await Api.apiCall('get', Api.goods.addFootprint, { productId })
			}
		},
		// 立即购买
		sumbitBuy(data, param) {
			this.params = param
			this.submitData = data
			// 页面跳转
			this.navToTabPage('/pages/order/createStoreOrder')
		},
		// 快速下单
		async quickOrder() {
			this.params = { 
				total: this.speednum,
				type: 1,
				skuId: this.speedList[this.speedIndex].id,
				goodsId: this.id,
			}
			let res = await Api.apiCall('get', Api.order.addOrder, this.params, true)
			if(res) {
				this.submitData = res
				// 页面跳转
				this.navToTabPage('/pages/order/createStoreOrder')
			}
		},
		// 页面跳转
		navToTabPage(url) {
			uni.navigateTo({ url })
		},
		// 去购物车和领取优惠券
		discount(url) {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			uni.navigateTo({ url })
		},
		// 打开规格
		openSku(type){
			this.$refs.sku.toggleSpec()
			this.optype = type
		},
		// 切换快速下单
		toggleSpeed(index) {
			this.speedIndex = index
			this.speednum = 1
		},
		// 右上角菜单
		moremenu(flag) {
			this.show = flag
		},
		// 轮播图切换
		toggle(e) {
			this.currentIndex = e.detail.current
		},
		// 关闭轮播图
		close(flag) {
			this.openImg = flag 
		},
		// 预览图片改变banner位置
		changebanner(idx) {
			if(this.bannerOpen) {
				this.currentIndex = idx
			}
		},
		// 预览图片
		showImg(arr, current, flag, obj) {
			this.bannerOpen = flag
			this.openImg = true
			this.currentImg = current
			let content = undefined
			if(obj) {
				content = {
					name: obj.memberName,
					attr: obj.attr,
					text: obj.consultContent,
				}
			}
			this.arrImg = arr.map(item => {
				return {
					img: item,
					content
				}
			})
		},
		//跳转锚点
		toAnchor(index){
			this.selectAnchor = index
			uni.pageScrollTo({scrollTop: this.anchorlist[index].top,duration: 200})
		},
		// 置顶
		gotop() {
			uni.pageScrollTo({scrollTop: 0, duration: 200})
		},
		//计算锚点高度
		calcAnchor(){
			let commentsView = uni.createSelectorQuery().select("#comments");
			commentsView.boundingClientRect((data) => {
				// 标题栏高度88rpx
				this.anchorlist[1].top = data.top - 88
				this.anchorlist[2].top = data.bottom - 88
			}).exec()
		},
		toggleMask(type) {
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.maskState = 2;
			setTimeout(() => {
				this.maskState = state;
			}, timer)
		},
		//分享
		share() {
			this.$refs.share.toggleMask();
		},
		// 获取看了又看的数据
		async getLookData(id) {
			let list =  await Api.apiEsCall('get', Api.goods.getLookShopData, {id})
			if(list) {
				this.lookList = list
			}
		},
		//收藏
		async toFavorite(item) {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({ url: '/pages/public/login' })
			} else {
				let res = {}
				let txt = ''
				if(this.favorite) { // 取消收藏
					txt = '取消收藏'
					res = await Api.apiCall('get', Api.goods.removeShopCollect, { productId: this.id }, true)
				}else { // 添加收藏
					txt = '添加收藏'
					res = await Api.apiCall('get', Api.goods.addShopCollect, { productId: this.id }, true)
				}
				if(res) {
					uni.showToast({
						title: txt,
						icon: 'none'
					})
					this.favorite = !this.favorite
				}
			}
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
page {
	padding: 88rpx 0 130rpx;
	background-color: #f8f8f8;
}

/* 快速定位商品、评价、详情 */
.speediness {
	position: fixed;
	top: 88rpx;
	left: 0;
	width: 100%;
	height: 90rpx;
	z-index: 9;
	.speediness-title {
		flex: 1;
		font-size: 28rpx;
		color: #AEA8A2;
		line-height: 90rpx;
		text-align: center;
	}
	.active {
		font-size: 34rpx;
		color: #333;
		font-weight: bold;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 43%;
			transform: translateX(-50%);
			bottom: 0;
			width: 34rpx;
			height: 6rpx;
			border-radius: 5rpx;
			background-color: #333;
		}
	}
}

/* 轮播图 */
.carousel {
	width: 100%;
	height: 750rpx;
	position: relative;
	swiper {
		height: 100%;
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750rpx;
			overflow: hidden;
			.image-wrapper {
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.carousel-index {
		position: absolute;
		right: 0;
		bottom: 20rpx;
		width: 84rpx;
		height: 41rpx;
		line-height: 41rpx;
		text-align: center;
		border-radius: 100rpx 0 0 100rpx;
		background-color: rgba(0, 0, 0, 0.2);
		letter-spacing: 1rpx;
	}
}

/* 标题简介 */
.introduce-section {
	padding: 40rpx 40rpx 30rpx 30rpx;
	margin-bottom: 20rpx;
	.price-box {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		height: 53rpx;
		letter-spacing: 1rpx;
		.price {
			color: #F24724;
			margin-right: 20rpx;
		}
		.m-price {
			text-decoration: line-through;
		}
	}
	.title {
		margin-top: 20rpx;
		line-height: 40rpx;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;  /*要显示的行数*/
		-webkit-box-orient: vertical;
	}
}

/* 规格选择+券+说明 */
.user-section {
	padding-left: 30rpx;
	margin-bottom: 20rpx;
	letter-spacing: 1.1rpx;
	&>view {
		letter-spacing: 1.1rpx;
		&:not(:last-child) {
			border-bottom: 1rpx solid #eee;
		}
		.icon-you,
		.user-quan {
			margin-right: 30rpx;
		}
	}
	.user-num {
		height: 96rpx;
		.user-text {
			margin-right: 20rpx;
		}
	}
	.user-ticket {
		height: 105rpx;
		.user-quan {
			width: 197rpx;
			height: 45rpx;
			line-height: 45rpx;
			text-align: center;
			color: #F24724;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('/static/image/coupon.png');
		}
	}
	.user-explain {
		height: 93rpx;
		.icon-explain {
			margin-right: 8rpx;
			width: 32rpx;
			height: 32rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('/static/image/explain.png');
		}
		.explain {
			margin-right: 20rpx;
		}
	}
}

.icon-you {
	font-size: $font-base + 2upx;
	color: #888;
}

/* 服务说明的展示 */
.serve {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 99;
	.serve-border {
		width: 568rpx;
		min-height: 220rpx;
		padding: 36rpx 30rpx 0;
		border-radius: 26rpx;
		&>view {
			margin-bottom: 36rpx;
		}
		.serve-title {
			margin-bottom: 12rpx;
			text {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #333;
				margin-right: 10rpx;
			}
		}
		.serve-txt {
			margin-left: 20rpx;
		}
	}
}

/* 评论 */
.comment {
	margin-bottom: 16rpx;
	padding: 30rpx;
	letter-spacing: 1rpx;
	.comment-title {
		height: 42rpx;
		line-height: 42rpx;
		.icon-you {
			margin-left: 14rpx;
		}
	}
	.comment-info {
		height: 86rpx;
		line-height: 86rpx;
		margin: 30rpx 0;
		image {
			width: 86rpx;
			height: 86rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
	}
	.comment-time {
		margin-bottom: 24rpx;
	}
	.comment-grade {
		height: 40rpx;
		line-height: 40rpx;
		&>text {
			margin-right: 21rpx;
		}
		.comment-start {
			margin-top: -5rpx;
			text {
				margin-right: 16rpx;
			}
			.icon-start {
				width: 30rpx;
				height: 29rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url('/static/image/start.png');
			}
			.icon-starta {
				background-image: url('/static/image/starta.png');
			}
		}
	}
	.comment-text {
		line-height: 46rpx;
		margin: 30rpx 0;
		letter-spacing: 1rpx;
	}
	.comment-image {
		image {
			width: 400rpx;
			height: 400rpx;
		}
	}
	.comment-image-more {
		image {
			width: 220rpx;
			height: 220rpx;
		}
		&:not(:nth-child(3n)) {
			margin-right: 15rpx;
		}
		&:not(:nth-child(-n+3)) {
			margin-top: 10rpx;
		}
	}
	.comment-none {
		margin-top: 30rpx;
		height: 42rpx;
		line-height: 42rpx;
		text-align: center;
		letter-spacing: 1rpx;
	}
	
}

.c-list {
	font-size: $font-sm + 2upx;
	color: $font-color-base;
	background: #fff;
	.c-row {
		display: flex;
		align-items: center;
		padding: 20upx;
		position: relative;
	}
	.tit {
		width: 140upx;
	}
	.con {
		flex: 1;
		color: $font-color-dark;
		.selected-text {
			margin-right: 10upx;
		}
	}
	.bz-list {
		height: 40upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		text {
			display: inline-block;
			margin-right: 30upx;
		}
	}
	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40upx;
	}
	.red {
		color: $uni-color-primary;
	}
}

/* 标题左右两根线 */
.d-header {
	height: 28rpx;
	position: relative;
	letter-spacing: 1rpx;
	margin-bottom: 30rpx;
	text {
		position: relative;
		z-index: 1;
		padding: 0 30rpx;
	}
	&:after {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%);
		width: 508rpx;
		height: 0;
		content: '';
		border-bottom: 1px solid #ddd;
	}
}

/* 商品详情 */
.detail-desc {
	width: 100%;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	.detail-content {
		width: 100%;
		&/deep/img {
			width: auto;
			height: auto;
			max-width: 100%;
		}
	}
}

/* 商品规格 */
.speed {
	width: 100%;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	.speed-info {
		margin-top: 10rpx;
		image {
			width: 220rpx;
			height: 220rpx;
			margin-right: 32rpx;
		}
		view {
			margin-top: 118rpx;
			.price {
				color: #F24724;
				margin-bottom: 8rpx;
			}
		}
	}
	.speed-op {
		margin-top: 40rpx;
		.speed-item {
			display: inline-block;
			margin-top: 30rpx;
			padding: 13rpx 40rpx;
			border: 1px solid #EEE;
			background-color: #EEE;
			border-radius: 32rpx;
		} 
		.speed-item-active {
			color: #F0431F;
			border: 1px solid #F0431F;
			background-color: rgba(240, 67, 31, 0.09);
		}
	}
	.speed-num {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 42rpx;
	}
	.speed-btn {
		margin-top: 42rpx;
		button {
			width: 300rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #C84739;
			border: 1px solid #C84739;
			border-radius: 50rpx;
		}
	}
}

/* 看了又看 */
.look {
	padding: 0 30rpx;
	.d-header {
		margin: 50rpx 0;
		text {
			background-color: #f8f8f8;
		}
	}
}

/* 规格选择弹窗 */
.attr-content {
	padding: 10upx 30upx;
	.a-t {
		display: flex;
		image {
			width: 170upx;
			height: 170upx;
			flex-shrink: 0;
			margin-top: -40upx;
			border-radius: 8upx;
		}
		.right {
			display: flex;
			flex-direction: column;
			padding-left: 24upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
			line-height: 42upx;
			.price {
				font-size: $font-lg;
				color: $uni-color-primary;
				margin-bottom: 10upx;
			}
			.selected-text {
				margin-right: 10upx;
			}
		}
	}
	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2upx;
		color: $font-color-base;
		padding-top: 30upx;
		padding-left: 10upx;
	}
	.item-list {
		padding: 20upx 0 0;
		display: flex;
		flex-wrap: wrap;
		text {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			margin-right: 20upx;
			margin-bottom: 20upx;
			border-radius: 100upx;
			min-width: 60upx;
			height: 60upx;
			padding: 0 20upx;
			font-size: $font-base;
			color: $font-color-dark;
		}
		.selected {
			background: #fbebee;
			color: $uni-color-primary;
		}
	}
}


/* 置顶 */
.shop-top {
	position: fixed;
	right: 29rpx;
	bottom: 179rpx;
	image {
		width: 82rpx;
		height: 82rpx;
	}
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9;
	width: 100%;
	height: 130rpx;
	padding: 15rpx 30rpx 35rpx;
	border-top: 1rpx solid #ddd;
	.page-bottom-op {
		width: 228rpx;
		.p-b-btn {
			height: 80rpx;
			justify-content: center;
			.icon-service,
			.icon-collect,
			.icon-shopping {
				margin: 7rpx 0 7rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.icon-service {
				width: 44rpx;
				height: 38rpx;
				background-image: url('/static/image/service.png');
			}
			.icon-collect {
				width: 43rpx;
				height: 41rpx;
				background-image: url('/static/image/collect.png');
			}
			.icon-collect-active {
				background-image: url('/static/image/collecta.png');
			}
			.icon-shopping {
				width: 42rpx;
				height: 40rpx;
				background-image: url('/static/image/shoppingcar.png');
			}
		}
	}
	.action-btn-group {
		margin-left: 30rpx;
		.action-btn {
			width: 208rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
			&::after {
				border: 0;
			}
		}
		.add-cart-btn {
			margin-right: 16rpx;
			background:linear-gradient(304deg, rgba(232,106,25,1) 0%, rgba(241,170,36,1) 100%);
		}
		.buy-now-btn {
			background-color: #C84739;
		}
	}
}

/* 优惠券面板 */
.mask {
	display: flex;
	align-items: flex-end;
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 9995;
	transition: 0.3s;

	.mask-content {
		width: 100%;
		min-height: 30vh;
		max-height: 70vh;
		background: #f3f3f3;
		transform: translateY(100%);
		transition: 0.3s;
		overflow-y: scroll;
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.4);

		.mask-content {
			transform: translateY(0);
		}
	}
}

/* 优惠券列表 */
.coupon-item {
	display: flex;
	flex-direction: column;
	margin: 20upx 24upx;
	background: #fff;
	.con {
		display: flex;
		align-items: center;
		position: relative;
		height: 120upx;
		padding: 0 30upx;
		&:after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 100%;
			height: 0;
			border-bottom: 1px dashed #f3f3f3;
			transform: scaleY(50%);
		}
	}
	.left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		overflow: hidden;
		height: 100upx;
	}
	.title {
		font-size: 32upx;
		color: $font-color-dark;
		margin-bottom: 10upx;
	}
	.time {
		font-size: 24upx;
		color: $font-color-light;
	}
	.right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: $font-color-base;
		height: 100upx;
	}
	.price {
		font-size: 44upx;
		color: $base-color;
		&:before {
			content: '￥';
			font-size: 34upx;
		}
	}
	.tips {
		font-size: 24upx;
		color: $font-color-light;
		line-height: 60upx;
		padding-left: 30upx;
	}
	.circle {
		position: absolute;
		left: -6upx;
		bottom: -10upx;
		z-index: 10;
		width: 20upx;
		height: 20upx;
		background: #f3f3f3;
		border-radius: 100px;
		&.r {
			left: auto;
			right: -6upx;
		}
	}
}
</style>
